<template>
  <!-- <el-tooltip content="信息提示" effect="dark" placement="bottom"> -->
  <div class="inlineBlock">
    <svg-icon icon-class="message" class-name="svgIcon" @click="handleOpen"></svg-icon>

    <!-- <m-dialog :visible.sync="drawer" width="80%" title="GPT">
      <Iframe
        src="https://movetab.jianyueku.com/api/chat-ai?key="
        style="height: 80vh;"
      ></Iframe>
    </m-dialog> -->
    <el-drawer title="我是标题" :visible.sync="drawer" direction="rtl" :before-close="handleClose" append-to-body
      custom-class="drawer-headler" :size="400">
      <div class="default_box">我来啦!</div>
      <div class="el-drawer__footer">
        <el-button type="primary">信息中心</el-button>
        <el-button>全部已读</el-button>
      </div>
    </el-drawer>
  </div>

  <!-- </el-tooltip> -->
</template>

<script>
import Iframe from "../Iframe";
export default {
  components: { Iframe },
  data() {
    return {
      drawer: false
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    handleOpen() {
      this.drawer = true;
    }
  }
};
</script>
<style lang="scss">
$drawerPadding: 20px;
$drawerBaseSize: 16px;
$drawerFooterPadding: 10px 20px 20px;

.drawer-headler {
  header#el-drawer__title {
    font-size: $drawerBaseSize;
  }

  section.el-drawer__body {
    font-size: $drawerBaseSize;
  }

  .el-drawer__footer {
    position: absolute;
    bottom: 0;
    padding: $drawerFooterPadding;
    text-align: left;
    width: 100%;
  }

  .default_box {
    padding: $drawerPadding;
  }
}
</style>

<style lang="scss" scoped>
.m-dialog {
  :deep(.el-dialog__body) {
    padding: 0 !important;
  }

  :deep(.el-dialog__header) {
    border-bottom: 1px solid #dedede;
  }
}

.inlineBlock {
  display: inline-block;
  padding: 0 8px;
  vertical-align: text-bottom;
  height: 100%;

  .svgIcon {
    fill: #5a5e66;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    cursor: pointer;
  }
}
</style>
